<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* z-index: number
			z-index默认值为0
			 值大 在上
			 */
			div{
				width: 100px;
				height: 100px;
				position: absolute;
			}
			.view1{
				background: red;
				left: 10px;
				top: 10px;
				z-index: 1;
			}
			.view2{
				background: blue;
				left: 20px;
				top: 20px;
				/* z-index: 100; */
			}
			.view3{
				background: gray;
				left: 30px;
				top: 30px;
				z-index: 2;
			}
			.view4{
				background: purple;
				left: 40px;
				top: 40px;
			}
		</style>
	</head>
	
	<body>
		<!-- 
		 定位流z-index属性
		 1.默认情况下 定位流的元素会盖住标准流的元素
		 2.默认情况下 定位流的元素后面编写的会盖住前面编写的
		 3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
		 
		 -->
		<div class="view1"></div>
		<div class="view2"></div>
		<div class="view3"></div>
		<div class="view4"></div>
	</body>
</html>
